<template>
  <div class="log-login-manage">

    <div style="width: 100%;">
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="primary" @click="loadLogLogins">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>
      <Button type="default" @click="clearLogLogin">清空日志</Button>
      <div class="float-right">
        <Input class="m-r-5px" v-model="searchFormData.username" style="width: 150px;" placeholder="用户名" @on-enter="loadLogLogins"/>
<!--        <DatePicker class="m-r-5px" v-model="searchFormData.login_time" :type="'date'" :format="'yyyy-MM-dd'"
                    style="width: 150px;" placeholder="登录时间" @on-change="loadLogLogins"/>-->
        <Button class="m-r-5px" @click="loadLogLogins">
          <Icon type="md-search"/>
          搜索
        </Button>
        <Button @click="clearSearchForm">清空</Button>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="m-b-10px"></div>

    <Table ref="table" :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadLogLogins">
    </Page>

  </div>
</template>

<script>
import ManageMixin from '../../../../mixin/ManageMixin'

export default {
  name: "LogLoginManage",
  mixins: [ManageMixin],
  data() {
    return {
      loading: false,
      searchFormData: {
        username: '',
        login_time: ''
      },
      columns: [
        {
          title: '用户名',
          key: 'username',
          width: 150
        },
        {
          title: 'IP',
          key: 'ip'
        },
        {
          title: '其他信息',
          key: 'message'
        },
        {
          title: '登录时间',
          key: 'login_time',
          width: 170
        },
        {
          title: '登录状态',
          key: 'login_state',
          width: 120,
          render: (h, params) => {
            if (params.row.login_state == '登录成功') {
              return h('span', {
                style: {
                  color: '#4caf50'
                }
              }, params.row.login_state)
            } else{
              return h('span', {
                style: {
                  color: '#f44336'
                }
              }, params.row.login_state)
            }
          }
        }
      ]
    }
  },
  mounted() {
    this.loadLogLogins()
  },
  methods: {
    loadLogLogins() {
      this.loading = true
      this.$PnApi.LogLoginApi.getLogLoginByPage(this.pageIndex, this.pageSize, this.searchFormData.username, this.searchFormData.login_time).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },
    clearSearchForm() {
      this.searchFormData.username = ''
      this.searchFormData.login_time = ''
      this.loadLogLogins();
    },
    clearLogLogin() {
      this.$Modal.confirm({
        title: '提醒',
        content: '确认要清空日志吗？',
        onOk: () => {
          this.$PnApi.LogLoginApi.clearLogLogin().then(result => {
            if (result.data.success) {
              this.$Message.success(result.data.message)
              this.loadLogLogins()
            }
          })
        }
      });
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
